<template>
  <div class="home-page">
    <!-- 欢迎语 -->
    <div class="welcome">
      <span class="emoji">👋</span>
      <span class="text">欢迎回来，Ryan Septimus</span>
    </div>

    <!-- 顶部五个卡片 -->
    <div class="cards">
      <div class="card c1">
        <img class="card-icon" :src="dp01Img" alt="DP01" onerror="this.style.display='none'" />
        <div class="card-title">协同工作</div>
        <div class="card-desc">高效统筹团队协作，智能优化任务流转，节省 78% 内耗时间</div>
        <div class="card-actions">
          <el-button type="success" size="small">立即体验</el-button>
        </div>
      </div>
      <div class="card c2">
        <img class="card-icon" :src="dp02Img" alt="DP02" onerror="this.style.display='none'" />
        <div class="card-title">文件传输</div>
        <div class="card-desc">AI 驱动的高效文件传输工具，瞬时实现大容量文件多客户端传递</div>
        <div class="card-actions">
          <el-button type="primary" size="small">立即体验</el-button>
        </div>
      </div>
      <div class="card c3">
        <img class="card-icon" :src="dp03Img" alt="DP03" onerror="this.style.display='none'" />
        <div class="card-title">发布通知</div>
        <div class="card-desc">多端内容同步发布，一键管理多个通知内容，准确传达信息</div>
        <div class="card-actions">
          <el-button type="warning" size="small">立即体验</el-button>
        </div>
      </div>
      <div class="card c4">
        <img class="card-icon" :src="dp04Img" alt="DP04" onerror="this.style.display='none'" />
        <div class="card-title">账户管理</div>
        <div class="card-desc">集中管理多终端账户数据，整合账户行为记录，优化权限策略</div>
        <div class="card-actions">
          <el-button type="danger" size="small">立即体验</el-button>
        </div>
      </div>
      <div class="card c5">
        <img class="card-icon" :src="dp05Img" alt="DP05" onerror="this.style.display='none'" />
        <div class="card-title">获取帮助</div>
        <div class="card-desc">多渠道解决多客户咨询与反馈，引导优化体验，提升使用满意度</div>
        <div class="card-actions">
          <el-button type="info" size="small">立即体验</el-button>
        </div>
      </div>
    </div>

    <!-- 中部图表区：指标卡 + 折线图 -->
    <div class="row">
      <div class="panel metrics">
        <div class="panel-header">
          <span>指标总览</span>
          <div class="actions">
            <el-tag type="success">较昨日 +12.3%</el-tag>
          </div>
        </div>
        <div class="metric-grid">
          <div class="metric">
            <div class="num">24,424</div>
            <div class="label">活跃用户</div>
          </div>
          <div class="metric">
            <div class="num">52,634</div>
            <div class="label">新建任务</div>
          </div>
          <div class="metric">
            <div class="num">125,874</div>
            <div class="label">完成传输</div>
          </div>
          <div class="metric">
            <div class="num">86,214</div>
            <div class="label">累计访问</div>
          </div>
          <div class="metric">
            <div class="num">4,187</div>
            <div class="label">异常告警</div>
          </div>
        </div>
      </div>

      <div class="panel linechart">
        <div class="panel-header">
          <span>数据趋势分析</span>
          <div class="actions">
            <el-radio-group size="small" model-value="week">
              <el-radio-button label="日" />
              <el-radio-button label="周" />
              <el-radio-button label="月" />
            </el-radio-group>
          </div>
        </div>
        <div class="chart-placeholder">
          <div class="line"></div>
          <div class="grid"></div>
          <div class="marker"></div>
        </div>
      </div>
    </div>

    <!-- 第二行：地图 + 热门视频表格 -->
    <div class="row">
      <div class="panel map">
        <div class="panel-header"><span>用户地区统计</span></div>
        <div class="map-placeholder">
          <div class="world"></div>
        </div>
      </div>

      <div class="panel table">
        <div class="panel-header">
          <span>热门视频</span>
          <small class="time">最近更新：2024-03-24 16:59</small>
        </div>
        <div class="table-placeholder">
          <table>
            <thead>
              <tr><th>#</th><th>标题</th><th>人气</th><th>进度</th></tr>
            </thead>
            <tbody>
              <tr><td>1</td><td>产品线A—产品宣传片</td><td>20%</td><td><div class="bar b1"></div></td></tr>
              <tr><td>2</td><td>产品线B—产品宣传片</td><td>18%</td><td><div class="bar b2"></div></td></tr>
              <tr><td>3</td><td>产品线C—产品宣传片</td><td>17%</td><td><div class="bar b3"></div></td></tr>
              <tr><td>4</td><td>产品线D—产品宣传片</td><td>13%</td><td><div class="bar b4"></div></td></tr>
              <tr><td>5</td><td>产品线E—产品宣传片</td><td>12%</td><td><div class="bar b5"></div></td></tr>
              <tr><td>6</td><td>产品线F—产品宣传片</td><td>12%</td><td><div class="bar b6"></div></td></tr>
              <tr><td>7</td><td>产品线G—产品宣传片</td><td>12%</td><td><div class="bar b7"></div></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 第三行：环形图 + 词云 -->
    <div class="row">
      <div class="panel donut">
        <div class="panel-header"><span>环形饼图</span></div>
        <div class="donut-placeholder">
          <div class="ring"></div>
          <div class="legend">
            <span class="dot d1"></span> 未开始
            <span class="dot d2"></span> 进行中
            <span class="dot d3"></span> 已完成
          </div>
        </div>
      </div>

      <div class="panel wordcloud">
        <div class="panel-header"><span>关键词云</span></div>
        <div class="cloud-placeholder">
          <span class="w w1">深度学习</span>
          <span class="w w2">数据挖掘</span>
          <span class="w w3">人工智能</span>
          <span class="w w4">SmartMining</span>
          <span class="w w5">云上服务</span>
          <span class="w w6">采购分析</span>
        </div>
      </div>
    </div>

    <!-- 底部版权 -->
    <div class="footer">Copyright © 2021–2025 YKB. All Rights Reserved</div>
  </div>
</template>

<script setup>
import dp01Img from '../assets/DP01.png'
import dp02Img from '../assets/DP02.png'
import dp03Img from '../assets/DP03.png'
import dp04Img from '../assets/DP04.png'
import dp05Img from '../assets/DP05.png'
// 纯静态占位首页，不包含菜单与顶部菜单
</script>

<style scoped>
.home-page{
  width:100%;
  padding:20px 2px;
  background:#f0f2f5;
  box-sizing:border-box;
  margin-top:-30px;
}

/* 欢迎语 */
.welcome{
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px; color:#333; font-weight:600; font-family:"Alibaba PuHuiTi","PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.welcome .emoji{ font-size:20px; }
.welcome .text{ font-size:20px; }

/* 顶部卡片区 */
.cards{
  display:grid;
  grid-template-columns: repeat(5, 315px);
  gap:12px;
  margin-bottom:12px;
  justify-content: space-between;
}
.card{
  width:315px; height:134px;
  border-radius:16px; padding:14px; color:#fff;
  display:flex; flex-direction:column; gap:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  position:relative;
}
.card-title{ font-size:20px; font-weight:600; font-family:"Inter","PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans"; }
.card-desc{ font-size:12px; color:rgba(255,255,255,.88); width:200px; }
.card-actions{ margin-top:auto; }
.card-icon{
  position:absolute; right:10px; top:10px;
  width:48px; height:48px;
  pointer-events:none;
}
.c1{ background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%); }
.c2{ background: linear-gradient(135deg, #00B42A 0%, #36CFC9 100%); }
.c3{ background: linear-gradient(135deg, #722ED1 0%, #9370DB 100%); }
.c4{ background: linear-gradient(135deg, #FF7D00 0%, #FFB800 100%); }
.c5{ background: linear-gradient(135deg, #FF0000 0%, #FF5C00 100%); }

/* 通用面板 */
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px; }
.panel{
  background:#fff; border-radius:10px; padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.panel-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; color:#333; font-weight:600;
}
.panel-header .time{ color:#8a8a8a; font-size:12px; }

/* 指标栅格 */
.metric-grid{
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap:10px;
}
.metric{ background:#f8fafc; border-radius:8px; padding:12px; text-align:center; }
.metric .num{ font-size:18px; font-weight:700; color:#3b82f6; }
.metric .label{ font-size:12px; color:#666; }

/* 折线图占位 */
.chart-placeholder{
  position:relative; height:220px; background:#f8fafc; border-radius:8px;
  overflow:hidden;
}
.chart-placeholder .grid{
  position:absolute; inset:0;
  background-image: linear-gradient(#e5e7eb 1px, transparent 1px),
                    linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
  opacity:.5;
}
.chart-placeholder .line{
  position:absolute; left:0; right:0; top:50%;
  height:2px; background:#93c5fd;
}
.chart-placeholder .marker{
  position:absolute; left:50%; top:40%; width:8px; height:8px;
  border-radius:50%; background:#2563eb;
}

/* 地图占位 */
.map-placeholder{ height:220px; background:#f8fafc; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.world{
  width:90%; height:70%; background:
    radial-gradient(circle at 20% 40%, #93c5fd 0 10px, transparent 11px),
    radial-gradient(circle at 70% 50%, #93c5fd 0 12px, transparent 13px),
    radial-gradient(circle at 40% 60%, #93c5fd 0 8px, transparent 9px);
  opacity:.35;
}

/* 表格占位 */
.table-placeholder{ background:#fff; border-radius:8px; overflow:hidden; }
.table-placeholder table{ width:100%; border-collapse:collapse; font-size:12px; }
.table-placeholder thead th{ text-align:left; padding:8px; background:#f8fafc; color:#666; }
.table-placeholder tbody td{ padding:8px; border-top:1px solid #f1f5f9; color:#333; }
.bar{ height:8px; border-radius:6px; background:#e5e7eb; position:relative; overflow:hidden; }
.bar::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:50%; background:#60a5fa; }

/* 环形图占位 */
.donut-placeholder{ display:flex; align-items:center; gap:16px; }
.ring{
  width:140px; height:140px; border-radius:50%;
  background: conic-gradient(#3b82f6 0 40%, #22c55e 40% 70%, #f59e0b 70% 100%);
  position:relative;
}
.ring::after{
  content:''; position:absolute; inset:18px; background:#fff; border-radius:50%;
}
.legend{ display:flex; gap:12px; align-items:center; color:#666; font-size:12px; }
.dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; }
.dot.d1{ background:#3b82f6; }
.dot.d2{ background:#22c55e; }
.dot.d3{ background:#f59e0b; }

/* 词云占位 */
.cloud-placeholder{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  padding:8px; background:#f8fafc; border-radius:8px;
}
.w{ color:#22c55e; }
.w.w1{ font-size:28px; font-weight:700; }
.w.w2{ font-size:20px; }
.w.w3{ font-size:18px; color:#3b82f6; }
.w.w4{ font-size:26px; color:#60a5fa; }
.w.w5{ font-size:18px; color:#f59e0b; }
.w.w6{ font-size:16px; color:#8b5cf6; }

/* 底部版权 */
.footer{
  text-align:center; color:#8a8a8a; font-size:12px; margin-top:12px;
}
/* 视觉微调：卡片无边框、文字白色、按钮半透明白背景与描边 */
.card{ border:none; color:#fff; }
.card-title{ color:#fff; }
.card-desc{ color:rgba(255,255,255,0.9); }

.cards .el-button{
  background: #ffffff !important;
  color: #FF7D00 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
  position: relative;
}
.cards .el-button::after{
  content: "›";
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
  color: #FF7D00;
}
.cards .el-button:hover{
  background: #ffffff !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
  transform: translateY(-0.5px);
}

/* 卡片按钮颜色覆盖 */
.c1 .el-button{ color:#175DFF !important; }
.c1 .el-button::after{ color:#175DFF; }

.c2 .el-button{ color:#00B52A !important; }
.c2 .el-button::after{ color:#00B52A; }

.c3 .el-button{ color:#732ED2 !important; }
.c3 .el-button::after{ color:#732ED2; }

/* c4 保持默认 #FF7D00，无需覆盖 */

.c5 .el-button{ color:#FF3500 !important; }
.c5 .el-button::after{ color:#FF3500; }

</style>